<template>
    <el-card style="margin-top: -1em">
        <el-row style="align-content: center">
            <el-col :offset="1" :span="10">
                <el-card class="infoCard" shadow="never">
                    <div class="title-line">
                    <el-image
                        class="avatar"
                        style="width: 6em; height: 6em; float: contour"
                        :src="patientUrl"
                        :preview-src-list="[patientUrl]"
                        :initial-index="1"
                        hide-on-click-modal>
                    </el-image>
                        <span class="title">详细信息</span>
                    </div>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item v-for="item in basicInfo" :label="item.label">
                            {{ item.value }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </el-col>
            <el-col :offset="2" :span="10">
                <el-card class="infCard" shadow="never">
                    <el-descriptions
                        :column="1"
                        border
                    >
                        <el-descriptions-item
                            v-for="item in nurseInfo"
                            :label="item.label">
                            {{ item.value }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
import { ref} from "vue";

export default {
    name: "Patient",
    //接收父组件的参数patientObj
    props: ['patientObj'],
    setup(props) {
        let patientUrl = props.patientObj.profile;
        //初始化病人名字和头像链接
        const patientName = ref(props.patientObj.name);
        //初始化病人详细数据
        const basicInfo = ref([
            {
                label: '姓名',
                value: props.patientObj.name,
            },
            {
                label: '性别',
                value: props.patientObj.gender,
            }, {
                label: '年龄',
                value: props.patientObj.age,
            }, {
                label: '身份证号',
                value: props.patientObj.idCard,
            }, {
                label: '联系人',
                value: props.patientObj.linkman,
            }, {
                label: '联系人电话',
                value: props.patientObj.linmanPhone,
            }
        ]);
        const nurseInfo = ref([
            {
                label: '住院编号',
                value: props.patientObj.pno,
            }, {
                label: '护理等级',
                value: props.patientObj.level,
            }, {
				label: '床位信息',
				value: props.patientObj.room + '房 ' + props.patientObj.code + '床',
            }, {
				label: '床位号',
				value: props.patientObj.queNumber,
            }, {
                label: '主治医生',
                value: props.patientObj.doctorId,
            }, {
                label: '责任护士',
                value: props.patientObj.nurseId,
            }, {
                label: '入院时间',
                value: props.patientObj.admissionDate,
            }, {
                label: '病人状态',
                value: '',
            }
        ]);
        for (let i = 0; i < props.patientObj.condition.length; i++) {
            nurseInfo.value[7].value += props.patientObj.condition[i];
            nurseInfo.value[7].value += " ";
        }
        return {
            patientName,
            patientUrl,
            basicInfo,
            nurseInfo,
        };
    }
}
</script>

<style scoped>

:deep(.el-card ) {
    border: none;
}
.title-line{
    display: flex;
    justify-content: space-between;
}
.title{
    font-weight:bold;
    font-size:17px;
    margin: auto;
}
.avatar{
    border-radius: 50%;
}

</style>